import React, {useEffect,useState} from 'react'
import {useLocation,useNavigate} from 'react-router-dom'
import {GetPractice} from "@/request/api"
import "./Practice.less"
import {Swiper,SwiperSlide} from "swiper/react"
import "swiper/css"
import Fill from "./components/Fill/Fill"
import Choice from "./components/Choice/Choice"
export default function Practice() {
  const navigate = useNavigate()
  // const swiper = new Swiper(...);
  let location = useLocation()
  console.log(location.state);
  let [list,setlist] = useState<IQuestion[]>([])
  const getPractice = async() => {
    let res = await GetPractice(location.state as IPractice)
    console.log(res);
    setlist(res.data)
  }

  const ChoiceType = ["one","check","many"]

  useEffect(()=>{
    getPractice()
  }, [])
  return (
    <div className='practice'>
      <div className='top'>
        {/* 图标自己弄 */}
        <span className='current'>1</span>/5
      </div>
      <Swiper
        spaceBetween={50}
        slidesPerView={1}
        onSlideChange={() => console.log('slide change')}
        onSwiper={(swiper) => console.log(swiper)}
      >
      {
        list.map((item,index)=>{
          return(
            
              <SwiperSlide key={item.id}>
              <div >
                
                {ChoiceType.includes(item.questionType)?<Choice data={item} oncheck={function (val: string): void {
                  throw new Error('Function not implemented.')
                } }></Choice>:<Fill data={item} oncheck={function (val: string): void {
                    throw new Error('Function not implemented.')
                  } }></Fill>}
                
              </div>

            </SwiperSlide>
            
          )
        })
      }
      </Swiper>
      {/* <SwiperSlide>

      </SwiperSlide> */}
      
    
      <div className='bottom' onClick={()=>{
        navigate(-1)
      }}>返回上一页</div>
    </div>
  )
}
